<template>
  <div class="print_box">
    <div class="print_tk_box">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <div class="print_btn">
        <a-button v-print="printTest" type="primary" @change="tablechange" @click="tableheig">打印</a-button>
        <!-- <a-button v-print="printTest_two"  v-if="print_key==2?true:false" type="primary">打印</a-button> -->
        <!-- <a-button v-print="printTest_three"  v-if="print_key==3?true:false" type="primary">打印</a-button> -->
        <a-button
          type="button"
          @click="getpdf($parent.print_data.listdata.dwmc+'-报价单'+print_key)"
        >PDF下载</a-button>
      </div>

      <a-tabs :default-active-key="1" @change="callback">
        <a-tab-pane :key="1" tab="模板一"></a-tab-pane>
        <a-tab-pane :key="2" tab="模板二"></a-tab-pane>
        <a-tab-pane :key="3" tab="模板三"></a-tab-pane>
      </a-tabs>

      <div class="print_tk print_tk_one" v-if="print_key==1?true:false" id="printTest">
        <div class="print_top">
          <ul class="ul_one">
            <li>
              <h1 class="hed_tit">{{$parent.print_data.sellerData.DWMC}}</h1>
            </li>
            <li class>
              <span class="tit_li">客户名称：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.DWMC}}</span>
            </li>
            <li class>
              <span class="tit_li">地&nbsp;&nbsp;&nbsp;&nbsp;址：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.DWDZ}}</span>
            </li>
            <li class>
              <span class="tit_li">电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.LXDH}}</span>
            </li>
            <li class>
              <span class="tit_li">传&nbsp;&nbsp;&nbsp;&nbsp;真：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.CZ}}</span>
            </li>
            <li class>
              <span class="tit_li">收件人：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.LXR}}</span>
            </li>
          </ul>
          <ul class="ul_two">
            <li class>
              <span class="tit_li">报价日期：</span>
              <span class="pr_p">{{$parent.print_data.listdata.zdrq}}</span>
            </li>

            <li class>
              <span class="tit_li">报价单号：</span>
              <span class="pr_p">{{$parent.print_data.bjdh}}</span>
            </li>
            <li class>
              <span class="tit_li">发&nbsp;&nbsp;&nbsp;&nbsp;自：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.DWDZ}}</span>
            </li>
            <li class>
              <span class="tit_li">地&nbsp;&nbsp;&nbsp;&nbsp;址：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.DWDZ}}</span>
            </li>
            <li class>
              <span class="tit_li">联系人</span>
              <span class="pr_p">{{$parent.print_data.sellerData.FZR}}</span>
            </li>
            <li class>
              <span class="tit_li">电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.LXDH}}</span>
            </li>
            <li class>
              <span class="tit_li">传&nbsp;&nbsp;&nbsp;&nbsp;真：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.CZ}}</span>
            </li>
          </ul>
        </div>
        <div class="table">
          <h1 class="bjd_tit">报价单</h1>
          <p class="table_tit">多谢询价，现将贵司所询产品规格型号回复如下：</p>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th class="xh">型号规格</th>
                <th>品牌</th>
                <th>单位</th>
                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
                <th>交货期</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.bjData" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.xl}}</td>
                <td>{{item.sccjc}}</td>
                <td>{{item.jldw}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>{{item.money}}</td>
                <td>{{item.yqfhrq}}</td>
              </tr>

              <tr>
                <td></td>
                <td></td>
                <td>本页数量小计：</td>
                <td>{{$parent.print_data.listdata.totalNum}}</td>
                <td colspan="4">
                  <p>
                    <span>金额小计：</span>
                    <span>{{$parent.print_data.listdata.totalPrice}}</span>
                  </p>
                  <p>
                    <span>金额总计：</span>
                    <span>{{$parent.print_data.listdata.totalPrice}}</span>
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="becareful">
          <ul>
            <li>
              <p>备注：{{$parent.print_data.publicData.BZ}}</p>
            </li>
            <!-- <li>
              <p>
                ★付款方式：
              </p>
            </li>
            <li>
              <p>
                ★交货期按生产厂商当前生产及运输状态计算，最终以签合同时核定为准。
              </p>
              <p>希望贵公司收到报价后，能尽快回复你们的决定，以便我司能更好的配合贵公司生产。</p>
            </li>-->
            <li class="becareful_fot">
              <p></p>
              <div class="qz_box">
                <img v-if="!imageurl" :src="'https://yb.bearing.cn/images/circle/'+$parent.print_data.sellerData.DWMC+'.png'" alt="">
              <img
                 v-else
                  :src="imageurl"
                  alt
                />
                <p>确认请签章：</p>
                <p>签章日期：</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="print_tk print_tk_two" v-if="print_key==2?true:false" id="printTest">
        <h1 class="hed_tit">报价单</h1>
        <div class="print_top">
          <ul>
            <li class>
              <span class="tit_li">发&nbsp;&nbsp;&nbsp;&nbsp;往：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.DWMC}}</span>
            </li>
            <li class>
              <span class="tit_li">发&nbsp;&nbsp;&nbsp;&nbsp;自：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.DWMC}}</span>
            </li>
            <li class>
              <span class="tit_li">收件人：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.LXR}}</span>
            </li>
            <li class>
              <span class="tit_li">电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.LXDH}}</span>
            </li>
            <li class>
              <span class="tit_li">传&nbsp;&nbsp;&nbsp;&nbsp;真：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.CZ}}</span>
            </li>
            <li class>
              <span class="tit_li">传&nbsp;&nbsp;&nbsp;&nbsp;真：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.CZ}}</span>
            </li>
            <li class>
              <span class="tit_li">电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.LXDH}}</span>
            </li>
            <li class>
              <span class="tit_li">报价员：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.FZR}}</span>
            </li>
            <li class>
              <span class="tit_li">日&nbsp;&nbsp;&nbsp;&nbsp;期：</span>
              <span class="pr_p">{{$parent.print_data.listdata.zdrq}}</span>
            </li>
            <li class>
              <span class="tit_li">业务员：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.FZR}}</span>
            </li>
          </ul>
        </div>
        <div class="table">
          <!-- <a-table :columns="columns" :bordered="true" :pagination="false" :data-source="data">
          <a slot="name" slot-scope="text">{{ text }}</a>
          <template slot="footer" slot-scope="currentPageData">
            <div class="footer">
              <div class="left_num_tit">合计</div>
              <div class="left_num">11111</div>
              <div class="num_td">11111</div>
              <div class="bhsdj_td">11111</div>
              <div class="bhsje_td">11111</div>
              <div class="bz_td">11111</div>
            </div>
          </template>
          </a-table>-->
          <table border="1">
            <thead>
              <tr>
                <th>序号</th>
                <th class="xh">型号规格</th>
                <th>品牌</th>
                <th>单位</th>
                <th>数量</th>
                <th>不含税单价</th>
                <th>不含税金额</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.bjData" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.xl}}</td>
                <td>{{item.sccjc}}</td>
                <td>{{item.jldw}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>{{item.money}}</td>
                <td>{{item.mxbz}}</td>
              </tr>
              <tr>
                <td>合计</td>
                <td colspan="3"></td>
                <td>{{$parent.print_data.listdata.totalNum}}</td>
                <td>{{$parent.print_data.listdata.totalPrice}}</td>
                <td>{{$parent.print_data.listdata.totalPrice}}</td>
                <td>{{$parent.print_data.publicData.BZ}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="becareful">
          <ul>
            <li>
              <p>★以上报价均为（不含税）人民币价格，且价格、货期均在5个工作日内有效。</p>
            </li>
            <li>
              <p>★付款方式：</p>
            </li>
            <li>
              <p>★交货期按生产厂商当前生产及运输状态计算，最终以签合同时核定为准。</p>
              <p>希望贵公司收到报价后，能尽快回复你们的决定，以便我司能更好的配合贵公司生产。</p>
            </li>
            <li class="becareful_fot">
              <p>顺祝商祺！</p>
              <div class="qz_box">
                <img v-if="!imageurl" :src="'https://yb.bearing.cn/images/circle/'+$parent.print_data.sellerData.DWMC+'.png'" alt="">
              <img
                 v-else
                  :src="imageurl"
                  alt
                />
                <p>确认请签章：</p>
                <p>签章日期：</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="print_tk print_tk_three" v-if="print_key==3?true:false" id="printTest">
        <h1 class="hed_tit">报价单</h1>
        <div class="print_top">
          <ul>
            <li class>
              <span class="tit_li">发&nbsp;&nbsp;&nbsp;&nbsp;往：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.DWMC}}</span>
            </li>
            <li class>
              <span class="tit_li">发&nbsp;&nbsp;&nbsp;&nbsp;自：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.DWMC}}</span>
            </li>
            <li class>
              <span class="tit_li">收件人：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.LXR}}</span>
            </li>
            <li class>
              <span class="tit_li">电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.LXDH}}</span>
            </li>
            <li class>
              <span class="tit_li">传&nbsp;&nbsp;&nbsp;&nbsp;真：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.CZ}}</span>
            </li>
            <li class>
              <span class="tit_li">传&nbsp;&nbsp;&nbsp;&nbsp;真：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.CZ}}</span>
            </li>
            <li class>
              <span class="tit_li">电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
              <span class="pr_p">{{$parent.print_data.buyerData.LXDH}}</span>
            </li>
            <li class>
              <span class="tit_li">报价员：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.FZR}}</span>
            </li>
            <li class>
              <span class="tit_li">日&nbsp;&nbsp;&nbsp;&nbsp;期：</span>
              <span class="pr_p">{{$parent.print_data.listdata.zdrq}}</span>
            </li>
            <li class>
              <span class="tit_li">业务员：</span>
              <span class="pr_p">{{$parent.print_data.sellerData.FZR}}</span>
            </li>
          </ul>
        </div>
        <div class="table">
          <!-- <a-table :columns="columns" :bordered="true" :pagination="false" :data-source="data">
          <a slot="name" slot-scope="text">{{ text }}</a>
          <template slot="footer" slot-scope="currentPageData">
            <div class="footer">
              <div class="left_num_tit">合计</div>
              <div class="left_num">11111</div>
              <div class="num_td">11111</div>
              <div class="bhsdj_td">11111</div>
              <div class="bhsje_td">11111</div>
              <div class="bz_td">11111</div>
            </div>
          </template>
          </a-table>-->
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th class="xh">物料名称</th>
                <th>品牌</th>
                <th>单位</th>
                <th>数量</th>
                <th>不含税单价</th>
                <th>不含税金额</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) in $parent.print_data.bjData" :key="i">
                <td>{{i+1}}</td>
                <td>{{item.xl}}</td>
                <td>{{item.sccjc}}</td>
                <td>{{item.jldw}}</td>
                <td>{{item.num}}</td>
                <td>{{item.money}}</td>
                <td>{{item.money}}</td>
                <td>{{item.mxbz}}</td>
              </tr>

              <tr>
                <td>合计</td>
                <td colspan="3"></td>
                <td>{{$parent.print_data.listdata.totalNum}}</td>
                <td>{{$parent.print_data.listdata.totalPrice}}</td>
                <td>{{$parent.print_data.listdata.totalPrice}}</td>
                <td>{{$parent.print_data.publicData.BZ}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="becareful">
          <ul>
            <li>
              <p>★以上报价均为（不含税）人民币价格，且价格、货期均在5个工作日内有效。</p>
            </li>
            <li>
              <p>★付款方式：</p>
            </li>
            <li>
              <p>★交货期按生产厂商当前生产及运输状态计算，最终以签合同时核定为准。</p>
              <p>希望贵公司收到报价后，能尽快回复你们的决定，以便我司能更好的配合贵公司生产。</p>
            </li>
            <li class="becareful_fot">
              <p>顺祝商祺！</p>
              <div class="qz_box">
             <img v-if="!imageurl" :src="'https://yb.bearing.cn/images/circle/'+$parent.print_data.sellerData.DWMC+'.png'" alt="">
              <img
                 v-else
                  :src="imageurl"
                  alt
                />
                <p>确认请签章：</p>
                <p>签章日期：</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {
      printTest: {
        id: "#printTest",
        popTitle: " ",
        extraCss: "",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      },
      print_key: 1,
      print_list: "",
      imageurl:''
    };
  },

  methods: {
    callback(key) {
      console.log(key);
      this.print_key = key;
    },
    close() {
      this.$parent.print_flag = false;
    },
    tablechange(e) {
      console.log(e);
    },
    tableheig() {},
    //title:下载的名称
    getpdf(title) {
    //  let url =  'https://yb.bearing.cn/images/circle/'+this.$parent.print_data.sellerData.DWMC+'.png'
		// 	this.getBase64Image(url)

      var pdfelement = document.getElementById("printTest");
      // var pdfelement = $("#printTest");
      // 导出之前先将滚动条置顶,不然会出现数据不全的现象
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // console.log(pdfelement);
      // let pageData = new Image();
      // pageData.setAttribute("crossOrigin", "Anonymous");
      // setTimeout(() => {
      html2Canvas(pdfelement).then(function(canvas) {
        console.log(canvas);
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        console.log(leftHeight);
        //页面偏移
        var position = -100;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 580.28;
        var imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = new Image();
        //设置图片跨域访问
        pageData.setAttribute("crossOrigin", "Anonymous");

        setTimeout(() => {
          pageData = canvas.toDataURL("image/jpeg", 1.0);
          // pageData.setAttribute("crossOrigin", "Anonymous");
          var pdf = new JsPDF("", "pt", "a4");
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save(title + ".pdf");
        }, 1000);
      });
      // }, 1000);
    },
    getBase64Image(url, ref) {
				var _this = this
				var image = new Image()
				image.src = url + '?v=' + Math.random() // 处理缓存
				image.crossOrigin = '*' // 支持跨域图片
				image.onload = ()=> {
					var canvas = document.createElement('canvas')
					canvas.width = image.width
					canvas.height = image.height
					var context = canvas.getContext('2d')
					context.drawImage(image, 0, 0, image.width, image.height)
					var quality = 0.8
					let dataurl = canvas.toDataURL('image/jpeg', quality)
					this.imageurl=dataurl
					console.log(this.imageurl)
				}
			}
  },

  created() {

    //  let url =  'https://yb.bearing.cn/images/circle/'+this.$parent.print_data.sellerData.DWMC+'.png'
	//调用图片转换base64的方法
			// this.getBase64Image(url)
		
    // this.print_list=this.$parent.print_data
    console.log(this.print_list);
  }
};
</script>


<style lang='less' scoped>
// @media print {
//   @import url("./print.css");
// }
.print_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.print_box .print_tk_box {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  background: #fff;
  padding: 20px;
}

.hed_tit {
  text-align: center;
}
.print_top {
  width: 95%;
  margin: 0 auto;
}
.print_top ul li {
  display: inline-block !important;
  width: 49%;
  text-align: left;
  margin: 2px 0;
  color: #000;
}

.tit_li {
  display: inline-block;
  width: 65px;
  text-align: left;
  color: #000;
}

.print_tk table {
  border-color: #000 !important;
}

.print_tk th,
.print_tk td {
  border-color: #000 !important;
}

.print_tk tr {
  border-color: #000 !important;
}

.print_tk .footer {
  display: flex;
}

.close {
  cursor: pointer;
  z-index: 999;
}
.print_tk .ant-table-footer {
  padding: 0 !important;
}
.print_btn {
  position: absolute;
  right: 28px;
  top: 67px;
  z-index: 999;
  button {
    margin: 0 10px;
  }
}
@media (max-width: 1600px) {
  .print_tk_box {
    overflow-y: scroll;
    height: 70%;
  }
}
.print_tk {
  // width: 95%;
  // margin: 10px auto;

  .table {
    width: 95%;
    margin: 10px auto;
    // overflow-y: scroll;
    //     height: 300px;

    .bjd_tit {
      text-align: center;
      letter-spacing: 30px;
      font-weight: bold;
      font-family: "楷体";
      font-size: 30px;
    }
    .table_tit {
      text-align: left;
      margin: 0;
      color: #000;
      padding-left: 10px;
    }
    table {
      width: 100%;

      thead {
        tr {
          th {
            padding: 5px 0;
            text-align: center;
            color: #000;
          }
          .xh {
            width: 30%;
          }
        }
      }
      tbody {
        // overflow-y: scroll;
        // height: 200px;
        tr {
          td {
            padding: 8px 0;
            text-align: center;
            color: #000;
          }
        }
      }
    }
  }

  .footer {
    .left_num_tit {
      width: 12%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .left_num {
      width: 36.4%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .num_td {
      width: 11%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bhsdj_td {
      width: 15%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bhsje_td {
      width: 15%;
      border-right: 1px solid #000;
      padding: 10px;
    }

    .bz_td {
      width: 11%;
      /* border-right: 1px solid #000; */
      padding: 10px;
    }
  }

  .ant-table.ant-table-bordered .ant-table-footer {
    border-color: #000;
    border-top: 0;
    border-radius: 0;
  }

  .ant-table-footer::before {
    top: 0 !important;
    height: 0px !important;
  }
  .ant-table-thead > tr > th {
    padding: 5px 16px !important;
  }
  .ant-table-tbody > tr > td {
    padding: 8px 16px !important;
  }
  .becareful {
    text-align: left;
    padding: 20px 0;
    width: 95%;
    margin: 0 auto;

    ul {
      li {
        p {
          margin: 0;
          margin: 5px 0;
          color: #000;
        }
      }
      .becareful_fot {
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30px auto;
        padding-right: 100px;
        .qz_box {
          position: relative;
          img {
            position: absolute;
            right: -104px;
            top: -60px;
            width: 100px;
            height: 100px;
                border-radius: 100px;
          }
        }
      }
    }
  }
}

.print_tk_one {
  .hed_tit {
    font-size: 25px;
    text-align: left;
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 60px;
    font-family: "楷体";
  }

  .tit_li {
    display: inline-block;
    width: 73px;
    text-align: left;
    color: #000;
  }
  .ul_one {
    width: 49%;
    display: inline-block;
    li {
      width: 100%;
    }
  }
  .ul_two {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    margin-top: 40px;
    li {
      width: 100%;
    }
  }
  .table {
    table {
      thead {
        tr {
          border-top: 1px dotted #ccc;
          th {
          }
        }
      }
      tbody {
        tr {
          border-top: 1px dotted #ccc;

          td {
            p {
              text-align: left;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
}
.print_tk_three {
  .table {
    // margin: 10px;
    table {
      width: 100%;
      thead {
        tr {
          th {
            padding: 5px 0;
            text-align: center;
            color: #000;
          }
          .xh {
            width: 30%;
          }
        }
      }
      tbody {
        tr {
          border-bottom: 1px solid #000;
          td {
            padding: 8px 0;
            text-align: center;
            color: #000;
          }
        }
      }
    }
  }
}
</style>
